<template>
  <section class="index-page-title" :class="{ full: isFull }">
    <div class="page-title etc">
      {{ title }}
    </div>
    <div v-if="showDesc" class="paeg-more" @click="go">
      <span>查看更多</span>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Kcxx',
  props: {
    title: {
      type: String,
      default: ''
    },
    isBg: {
      type: Boolean,
      default: true
    },
    showDesc: {
      type: Boolean,
      default: true
    },
    isFull: {
      type: Boolean,
      default: false
    },
    nextUrl: {
      type: String,
      default: ''
    }
  },
  methods: {
    go() {
      if (this.nextUrl) {
        // this.$router.push(this.nextUrl)
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';
.index-page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: rem(98);
  background: linear-gradient(0deg, #f7f8f9 0%, #ffffff 100%);
  border-radius: rem(16);
  &.full {
    position: absolute;
    left: 0;
    right: 0;
  }
  &.bg {
    background: url('./images/kcxxbj.png') no-repeat;
    background-size: 100% 100%;
    border-radius: rem(0);
  }

  .page-title {
    padding-left: rem(21);
    font-size: rem(32);
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: bold;
    color: #222222;
    flex: 1;
  }
  .paeg-more {
    flex: 0 0 auto;
    margin-left: rem(20);
    font-size: rem(26);
    font-family: PingFang SC Regular, PingFang SC Regular-Regular;
    font-weight: 400;
    padding-right: rem(19);
    color: #999999;
  }
}
</style>
